import { Component } from "react"
import { useParams, useLocation, useNavigate } from "react-router-dom"
import homes from '../css/homec.css'
import { Chart, Util } from '@antv/g2';
function withRouter(Component) {
  return (props) => (
    <Component
      {...props}
      params={useParams()}
      location={useLocation()}
      navigate={useNavigate()}
    />
  );
}

class Home extends Component {
  constructor() {
    super()
    this.state = {
      data: [
        { type: '一线城市', value: 0.19 },
        { type: '二线城市', value: 0.21 },
        { type: '三线城市', value: 0.27 },
        { type: '四线及以下', value: 0.33 },
      ]
    }
  }
  componentDidMount() {
    this.randerChart1()
  }
   randerChart1 = () => {
    const tempNode = document.getElementById('chartData1')
    const child = tempNode?.lastElementChild
    if (child) {
      // 这里我做了一个判断  防止饼图重复渲染 但是直接操作了dom 
      // 如果有更好的方法 可以换掉
      tempNode.removeChild(child)
    }
    console.log(this.state.data);

    // Step 1: 创建 Chart 对象
    const chart = new Chart({
      container: 'chartData1', // 指定图表容器 ID
      width: 450, // 指定图表宽度
      height: 300 // 指定图表高度
    })
    // Step 2: 载入数据源
    chart.data(this.state.data);

chart.coordinate('theta', {
  radius: 0.75
});
chart.tooltip({
  showMarkers: false
});

const interval = chart
  .interval()
  .adjust('stack')
  .position('value')
  .color('type', ['#063d8a', '#1770d6', '#47abfc', '#38c060'])
  .style({ opacity: 0.4 })
  .state({
    active: {
      style: (element) => {
        const shape = element.shape;
        return {
          matrix: Util.zoom(shape, 1.1),
        }
      }
    }
  })
  .label('type', (val) => {
    const opacity = val === '四线及以下' ? 1 : 0.5;
    return {
      offset: -30,
      style: {
        opacity,
        fill: 'white',
        fontSize: 12,
        shadowBlur: 2,
        shadowColor: 'rgba(0, 0, 0, .45)',
      },
      content: (obj) => {
        return obj.type + '\n' + obj.value + '%';
      },
    };
  });

chart.interaction('element-single-selected');

chart.render();
  }
  render() {
    console.log(this.props);
    return (
      <div className={homes.box}>
        <div id="chartData1"></div>
      </div>
    )
  }
}

export default withRouter(Home)